iT邦幫忙

2021 iThome 鐵人賽

DAY 11
2

Operators

有時候畫面的比例,會影響 CSS 顯示的效果,而在 SASS 中,我們可以用數學的運算公式去調整 style 中的內容,讓設計樣式更加聰明的去適應畫面。基本可運用的運算子像是 +, -, *, /, % 都可以用作 SASS 的計算。

實作

// operator.sass
$deep-blue: #00beb5
$primary-button-color: #007ea5
$main-width: 960px

.container
    background-color: $deep-blue
    padding: 10px
    width: $main-width

    button
        color: $primary-button-color
        font-size: 24px
        padding: 16px
        width: $main-width*7/10
        height: 100%

    .button-small
        font-size: 12px
        padding: 8px
        width: $main-width*3/10

首先,訂定一個固定大小的 container,練習運用運算子,排版一組 button,讓他們能夠依照比例排列在同一行中。

container 的大小用參數訂為 960 px,如果之後有要統一更改大小,也可以從參數一次改,不用到下面其他 class 中去改 property。

在 container 下的 button 做一些基本的設置,並且於 width 運算,將 main-width 切分為十分之七。

另設一個小 button class 他會繼承原本的 button 樣式,並且有套用到這個 class 的 button 會再加上 small 的其他設定,width 的部分切分為十分之三。

// App.js
import "./App.css";
import "./assets/sass/operator.sass";
function App() {
  return (
    <div className="App">
      <div className="container">
        <button>click me !</button>
        <button className="button-small">click me !</button>
        <button className="button-small">click me !</button>
        <button>click me !</button>
      </div>
    </div>
  );
}

export default App;

之後在 App.js 中引入 sass,然後放幾顆 button 來試試看效果。

Untitled

就會獲得完美分配好的 button ~

雖然要切分 column 的話,我會偏好使用 grid 系統去切,比較快,但是有時候遇到奇數或是要特別份數的 column 的時候,直接針對 css 去做計算其實是比較方便的,但兩種方法有利有弊,就看大家選擇怎麼使用囉!


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了!是世界奇觀!

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 10 Partials, Modules
下一篇
DAY 12 SASS 間的相似之處
系列文
SASS 基礎初學三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言